import React, { Component, PropTypes } from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,DatePicker,Tag,Upload,message} from 'antd';
import projectApi from '../../../../api/project/project'
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
const InputGroup = Input.Group;
const { TextArea } = Input;
const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  }];
class AddProjectForm　extends React.Component {

    state = {
        projectStatus:[], 
        options,   
  };

  
  componentDidMount() {
    this.getProjectStatus();
    this.getInitClassification();
    
  }
  getInitClassification=async()=>{
        const res=await projectApi.getclassification("asset",null,1);
        const {code,data}=res;
        if(code==1){
            var list=[]
            for(var value of data ){
                var temp={
                    value: value.id,
                    label: value.nickname,
                    isLeaf: false,
                }
                list.push(temp)
            
         }
         this.setState({options:list})
        }
     
  }
  getProjectStatus=async()=>{
   const res=await projectApi.getProjectStatus()
   const {code ,data}=res;
   if(code==1){
    this.setState({projectStatus:data})
   }
  }
  onChange = (value, selectedOptions) => {
    console.log(value, selectedOptions);
  }
  loadData = (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    console.log(targetOption)
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = [{
        label: `${targetOption.label} Dynamic 1`,
        value: 'dynamic1',
      }, {
        label: `${targetOption.label} Dynamic 2`,
        value: 'dynamic2',
      }];
      this.setState({
        options: [...this.state.options],
      });
    }, 1000);
}
  render() {
    const Option = Select.Option;
    const selectStatus= (
      <Select defaultValue={"正在募集"} style={{ width: 120 }}>
        {
            this.state.projectStatus.map((item)=>(
                <Option key={item.name}  value={item.name}>{item.name}</Option>
            ))
        }
       

      </Select>

        

    );
    return(
        <Row style={{marginTop:20,width:"600px",paddingBottom:50}}>
         <Row 　 style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目状态:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Input　addonAfter={selectStatus} defaultValue="正在募集" /></Col>
         </Row>

           <Row 　 style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目分类:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Input　 defaultValue="基金" /></Col>
         </Row>

         <Row 　 style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目分类:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Input  placeholder="请输入" /></Col>
         </Row>

    <Row 　 style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目名称:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Input  placeholder="请输入项目名称" /></Col>
         </Row>

        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目简称:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Input/></Col>
        </Row>
    
        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>起止时间:</Col><Col style={{ marginLeft: 5}}  xxl={18}>
          <InputGroup compact>
          <Input style={{ width: '50%' }} defaultValue="input content" />
          <DatePicker />
        </InputGroup></Col>
        </Row>
        
        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>资产分类:</Col><Col style={{ marginLeft: 5}}  xxl={16}> <Cascader
        options={this.state.options}
        loadData={this.loadData}
        onChange={this.onChange}
        changeOnSelect
      /></Col>
        </Row>
        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>项目标签:</Col><Col style={{ marginLeft: 5}}  xxl={16}><Tag>添加标签</Tag></Col>
        </Row>
        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>一句话介绍:</Col><Col style={{ marginLeft: 5}}  xxl={16}><TextArea /></Col>
        </Row>
        <Row  style={{ marginBottom: 16}} type="flex" align="middle">
          <Col xxl={4}>商标：</Col><Col style={{ marginLeft: 5}}  xxl={16}>
          <Avatar />
          </Col>
        </Row>
        <Row  style={{ marginBottom: 16,marginTop:50}} type="flex"　justify="center" align="middle">
          <Col xxl={4}><Button>取消</Button></Col><Col style={{ marginLeft:5}}  xxl={4}><Button>下一步</Button></Col>
        </Row>

        </Row>
    )
    
  }
}

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  
  function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }
  
  class Avatar extends React.Component {
    state = {
      loading: false,
    };
    handleChange = (info) => {
      if (info.file.status === 'uploading') {
        this.setState({ loading: true });
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => this.setState({
          imageUrl,
          loading: false,
        }));
      }
    }
    render() {
      const uploadButton = (
        <div>
          <Icon type={this.state.loading ? 'loading' : 'plus'} />
          <div className="ant-upload-text">Upload</div>
        </div>
      );
      const imageUrl = this.state.imageUrl;
      return (
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action="//jsonplaceholder.typicode.com/posts/"
          beforeUpload={beforeUpload}
          onChange={this.handleChange}
        >
          {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
        </Upload>
      );
    }
  }

export default AddProjectForm;
